<template>
  <el-radio-group
    v-model="value"
    :id="'w' + props.formCtrlId"
    :name="'w' + props.formCtrlId"
    :size="props.size"
    @change="mySubmit"
  >
    <template v-for="(item, key) in props.optionList" :key="key">
      <el-radio :label="item[props.optionListSetting.valueProp]">
        {{ item[props.optionListSetting.labelProp] }}
      </el-radio>
    </template>
  </el-radio-group>
</template>

<script lang="ts" setup>
import { BaseFormItem } from "@/components/form/formItem/FormItemMeta";
import FormItemCtrl from "@/components/form/formItem/FormItemCtrl";

export interface OptionListSetting {
  labelProp: string;
  valueProp: string;
}
export interface RadioProps extends BaseFormItem {
  modelValue: string | number | Array<unknown> | boolean | null;
  formCtrlId?: number; // 控件id, 区分组件
  controlType?: string; // 控件类型
  size?: string; // 尺寸 medium / small / mini
  optionList?: Array<unknown>;
  optionListSetting?: OptionListSetting;
}

const props = withDefaults(defineProps<RadioProps>(), {
  modelValue: "",
  formCtrlId: 10001,
  size: "default",
  optionList: () => [],
  optionListSetting: () => {
    return { labelProp: "label", valueProp: "value" };
  },
});

const emit = defineEmits(["update:modelValue", "myChange", "input", "change"]);

const { value, mySubmit } = FormItemCtrl(props, emit);
</script>

<style scoped></style>
